<template>
  <div class="navi-wrapper">
    <div style="margin-bottom: 10px;">
      <l-button outline @click="toPage('/')">
        首页
      </l-button>
    </div>
    <l-button v-for="(button, index) in allRoutes"
              :key="index"
              @click="toPage(button.path)"
              outline
              style="margin-right: 5px;">{{button.name}}
    </l-button>
  </div>
</template>

<script>
export default {
  name: 'Navi',
  methods: {
    toPage (path) {
      this.$router.push(path);
    }
  },
  data () {
    return {
      allRoutes: []
    };
  },
  mounted () {
    this.allRoutes = this.$router.options.routes.filter(item => {
      return item.name !== 'Home';
    }).map(item => {
      return {
        path: item.path,
        name: `l-${item.name.toLowerCase()}`
      };
    });
  }
};
</script>
